<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">需求列表</h2>
      <button
        type="button"
        {{on "click" this.showAddModal}}
        class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <T::Icon @icon="add" class="mr-2" />
        新增需求
      </button>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">需求名称</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">产品经理</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">状态</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">评审时间</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">联调时间</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">提测时间</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">上线时间</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">开发人员</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">测试人员</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">开发工时</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">测试工时</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-300">操作</th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
          {{#each @requirements as |requirement|}}
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                {{requirement.name}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{requirement.productManager}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{this.getStatusClass requirement.status}}">
                  {{requirement.status}}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{requirement.reviewTime}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{requirement.integrationTime}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{requirement.testTime}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{requirement.releaseTime}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                {{#each (this.getUniqueDevelopers requirement.developers) as |dev|}}
                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{this.getMemberTypeClass (if dev.name dev.name dev)}} mr-1">
                    {{if dev.name dev.name dev}}
                  </span>
                {{/each}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                {{#each (this.getUniqueTesters requirement.testers) as |tester|}}
                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{this.getMemberTypeClass (if tester.name tester.name tester)}} mr-1">
                    {{if tester.name tester.name tester}}
                  </span>
                {{/each}}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{requirement.devHours}}h
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                {{requirement.testHours}}h
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button
                  type="button"
                  {{on "click" (fn this.editRequirement requirement)}}
                  class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3"
                >
                  编辑
                </button>
                <button
                  type="button"
                  {{on "click" (fn this.deleteRequirement requirement.id)}}
                  class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                >
                  删除
                </button>
              </td>
            </tr>
          {{else}}
            <tr>
              <td colspan="12" class="px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                <div class="flex flex-col items-center">
                  <svg class="w-12 h-12 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                  </svg>
                  <p class="text-lg font-medium mb-1">暂无需求数据</p>
                  <p class="text-sm">点击"新增需求"按钮来创建第一个需求</p>
                </div>
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    </div>

    {{#if this.showModal}}
      <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-2xl">
          <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">
            {{if this.editingRequirement "编辑需求" "新增需求"}}
          </h3>
          
          <form {{on "submit" this.saveRequirement}}>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <T::Input 
                @key="需求名称" 
                @value={{this.formData.name}} 
                @required={{true}}
                {{on "input" (fn this.updateFormData "name")}}
              />
              
              <T::Input 
                @key="产品经理" 
                @value={{this.formData.productManager}}
                {{on "input" (fn this.updateFormData "productManager")}}
              />
              
              <div class="pt-2">
                <label for="status-select" class="block">状态</label>
                <select
                  id="status-select"
                  value={{this.formData.status}}
                  {{on "change" (fn this.updateFormData "status")}}
                  class="block mt-2 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-gray-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300"
                >
                  <option value="待评审">待评审</option>
                  <option value="技术方案">技术方案</option>
                  <option value="开发">开发</option>
                  <option value="测试">测试</option>
                  <option value="上线">上线</option>
                </select>
              </div>
              
              <T::Input 
                @key="评审时间" 
                @type="date"
                @value={{this.formData.reviewTime}}
                {{on "input" (fn this.updateFormData "reviewTime")}}
              />
              
              <T::Input 
                @key="联调时间" 
                @type="date"
                @value={{this.formData.integrationTime}}
                {{on "input" (fn this.updateFormData "integrationTime")}}
              />
              
              <T::Input 
                @key="提测时间" 
                @type="date"
                @value={{this.formData.testTime}}
                {{on "input" (fn this.updateFormData "testTime")}}
              />
              
              <T::Input 
                @key="上线时间" 
                @type="date"
                @value={{this.formData.releaseTime}}
                {{on "input" (fn this.updateFormData "releaseTime")}}
              />
            </div>
            
            
            <div class="flex justify-end space-x-3 mt-6">
              <button
                type="button"
                {{on "click" this.hideModal}}
                class="px-4 py-2 text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
              >
                取消
              </button>
              <button
                type="submit"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
              >
                {{if this.editingRequirement "保存" "创建"}}
              </button>
            </div>
          </form>
        </div>
      </div>
    {{/if}}
  </div>
</div>